<template>
	<article class="page page-flash-player">
		<h4 class="text-center">Flash播放器</h4>
		<form class="page-body" @submit.prevent="submitHandler">
			<div class="row">
				<div class="col-3 left">
					<fieldset>
						<legend>资源列表</legend>
						<div class="fieldset-content">
							<div class="form-group">
								<div class="row-flex">
									<div class="row-flex-main">网络文件</div>
								</div>
							</div>
							<div class="form-group website-input">
								<div class="input-group">
									<input class="form-control" type="text" v-model.trim="website" placeholder="请输入网址" />
									<span class="input-group-text" @click="submitHandler">
										<i class="fa fa-chevron-right" style="color: #6c757d;"></i>
									</span>
								</div>
							</div>
							<div class="form-group">
								<div class="row-flex">
									<div class="row-flex-main">本地文件</div>
									<div class="row-flex-suffix" title="清空" @click="clearFilesList">
										<i class="fa fa-trash-o"></i>
									</div>
								</div>
							</div>
							<div class="form-group file-list" @drop.prevent="filesDrop" @dragover.prevent>
								<div v-for="(v, i) in filesList" :key="i"
									:class="['website-item', 'row-flex', { active: i === fileActiveIndex }]" @click="clickItem(v, i)">
									<div class="row-flex-main text-ellipsis"><i :class="v.icon"></i>{{ v.label }}</div>
									<div class="row-flex-suffix"><i class="fa fa-close" @click.stop="deleteItem(i)"></i></div>
								</div>
								<div v-if="filesList.length === 0" class="nodata">将Flash文件拖到此处</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-9 right">
					<fieldset>
						<legend>播放区域</legend>
						<div class="fieldset-content" ref="fieldsetContent">
							<webview :src="iframeUrl" @load="loadingCount = 0" @did-stop-loading="loadingCount = 0" plugins></webview>
							<!-- <iframe :src="iframeUrl" @load="loadingCount=0"></iframe> -->
							<x-button block type="primary" @click="fullscreenSwitch">全屏切换</x-button>
							<x-loading size="large" fix v-if="loadingCount > 0"></x-loading>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
const path = global.require('path')

export default {
	name: 'flash-player',
	data() {
		return {
			filesList: [],
			fileActiveIndex: -1,
			website: '',
			iframeUrl: '',
			loadingCount: 0
		}
	},
	computed: {
		filePathsList() {
			return this.filesList.map(v => v.value)
		}
	},
	methods: {
		// 拖拽文件
		filesDrop(e) {
			const fileList = e.dataTransfer.files
			if (!fileList) return
			for (let i = 0; i < fileList.length; i++) {
				const file = fileList[i]
				let label = file.name || path.basename(file.path)
				if (!file.type || !/.(swf|fla|flv|as)$/i.test(label)) {
					this.$toast('请选择Flash格式的文件！')
					continue
				}
				if (!this.filePathsList.includes(file.path)) {
					this.filesList.push({ label, value: file.path })
				}
			}
		},
		// 删除单个本地文件
		deleteItem(index) {
			this.filesList.splice(index, 1)
		},
		// 清空本地文件列表
		clearFilesList() {
			this.filesList = []
		},
		// 访问线上资源
		submitHandler() {
			if (!this.website) return
			if (this.iframeUrl === this.website) return
			this.fileActiveIndex = -1
			this.iframeUrl = this.website
		},
		clickItem(item, index) {
			if (this.fileActiveIndex === index) return
			this.fileActiveIndex = index
			let website = item.value || ''
			this.loadingCount++
			this.iframeUrl = ''
			this.$nextTick(() => {
				this.iframeUrl = website
			})
		},
		fullscreenSwitch() {
			if (document.webkitIsFullScreen) {
				document.exitFullscreen()
			} else {
				this.$refs.fieldsetContent && this.$refs.fieldsetContent.requestFullscreen()
			}
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.page-flash-player {
	display: flex;
	flex-direction: column;

	fieldset {
		height: 100%;

		.fieldset-content {
			height: calc(100% - 2em);
			overflow: auto;
		}
	}

	.page-body {
		height: 0;
		flex-grow: 1;

		&>.row {
			height: 100%;
		}

		.left {
			height: 100%;
			color: #6c757d;

			.fieldset-content {
				display: flex;
				flex-direction: column;
			}

			.website-input {
				margin-top: .5em;
			}

			.file-list {
				flex-grow: 1;
				padding: 0 1em;
				margin-top: .5em;
				border-radius: .5em;
				background-color: @bgGrey;
				overflow: hidden auto;
				position: relative;

				.website-item {
					padding: .5em 0;
					cursor: pointer;
					border-bottom: 1px dashed #bbb;

					&.active,
					&:hover {
						color: @colorPrimary;
					}
				}
			}
		}

		.right {
			height: 100%;

			.fieldset-content {
				position: relative;
				border-radius: 0.5em;
				display: flex;
				flex-direction: column;
			}

			webview,
			iframe {
				height: 0;
				flex-grow: 1;
				border-radius: .5em;
				margin-bottom: 1em;
				background-color: @bgGrey;
			}
		}
	}
}
</style>
